jQuery Validation插件介绍

jQuery Validation插件简介

jQuery有很多有用的插件，其中Validation插件是最常用的插件之一。客户端表单验证是现代网站经常采用的方式，可以减少服务器压力，缩短用户等待时间和提升用户体验。jQuery Validation插件提供了很多的配置项目，还附带了很多验证方法及多语言提示。
jQuery表单验证插件：https://plugins.jquery.com/tag/validate/
jQuery Validation插件：http://jqueryvalidation.org/

jQuery Validation插件特点：

让客户端表单验证变得非常容易，并且提供了很多的配置项目。
插件还附带了很多验证方法，并实现了国际化，可以配置多语言的提示信息。在页面中引入插件：
1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

jQuery Validation基本API

重要概念：
method: 验证方法，指的是校验的逻辑。比如email方法，检查输入的文本是否符合email的规则。
rule: 验证规则，指的是元素和验证方法的关联。比如页面一个id为email的文本框，需要带有email的验证方法。

validate()方法：

validate是插件的核心方法，定义了基本的校验规则和一些有用的配置项。

jQuery Validation基本验证方法(默认校验规则)：

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:”check.php”	远程校验。使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:”#field”	与另一个元素值相等。比如这里的输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	最大长度，输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	最小长度，输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	长度范围。输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	值范围，输入值必须介于 5 和 10 之间。
16	max:5	最大值，输入值不能大于 5。
17	min:10	最小值。输入值不能小于 10。

$(function () {
        $("#frmForm").validate({
            rules: {
                  firstname: "required",
                  lastname: "required",
                  username: {
                    required: true,
                    minlength: 2
                  },
                  password: {
                    required: true,
                    minlength: 5
                  },
                  confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                  },
                  email: {
                    required: true,
                    email: true
                  },
                },
            //messages 处，如果某个控件没有 message，将调用默认的信息    
            messages: {
              firstname: "请输入您的名字",
              lastname: "请输入您的姓氏",
              username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成"
              },
              password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
              },
              confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
              },
              email: "请输入一个正确的邮箱",
            }
        });
    })

debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});
//如果一个页面中有多个表单都想设置成为 debug，则使用：
$.validator.setDefaults({
   debug: true
})

remote:异步验证

remote：URL
使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: "check-email.php"
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 “true” 或 “false”，不能有其他输出。

jQuery Validation高级API

valid()方法：

检查表单或某些元素是否有效

1
2
3

$("#check").click(function () {
            alert($("#demoForm").valid() ? "填写正确！" : "填写错误！");
        });

rules()方法

rules()：获取表单元素的校验规则
rules(“add”,rules)：向表单元素增加校验规则

rules(“remove”,rules)：删除表单元素校验规则

1
2
3

$("#username").rules();
$("#username").rules("add",{minlength:2,maxlength:10});
$("#username").rules("remove","minlength maxlength");

Validator对象方法：

validate方法返回Validator对象，Validator对象有很多有用的方法：

Validator.form():验证表单是否有效，返回true/false
Validator.element(element):验证某个元素是否有效，返回true/false

Validator.resetForm():把表单恢复到验证前原来的状态

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });
});

Validator.showErrors(errors):针对某个元素显示特定的错误信息
Validator.numberOfInvalids():返回无效的元素数量

Validator对象静态方法

Validator对象还有很多有用的静态方法，可以直接使用：
jQuery.validator.addMethod(name,metthod[,message]):增加自定义的验证方法
jQuery.validator.format(template,argument,argumentN…):格式化字符串，用参数代替模板中的{n}
jQuery.validator.setDefaults(options):修改插件默认设置
jQuery.validator.addClassRules(name,rules):为某些包含名为name的class增加组合验证类型

Validate()方法配置项

submitHandler:通过验证后运行的函数，可以加上表单提交的方法

$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})

invalidHandler:无效表单提交后运行的函数
ignore:对某些元素不进行验证

rules:定义校验规则.key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。

$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    }
})

messages:自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。

$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        name:"Name不能为空",
        email:{       
            required:"E-mail不能为空",
            email:"E-mail地址不正确"
        }
    }
})

groups:对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里。

$("#myform").validate({
    groups:{
        username:"fname lname"
    },
    errorPlacement:function(error,element) {
        if (element.attr("name") == "fname" || element.attr("name") == "lname")   
            error.insertAfter("#lastname");
        else    
            error.insertAfter(element);
    },
   debug:true
})

onsubmit:提交时验证。设置为 false 就用其他方法去验证。
onfocusout:失去焦点时验证（不包括复选框/单选按钮）。
onkeyup:是否在敲击键盘时验证
onclick:是否在鼠标点击时验证，一般用于checkbox或者radio
focusInvalid:提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点
focusCleanup:如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。
errorClass：指定错误提示的css类名，默认为error,可以自定义错误提示的样式。
validClass：指定验证通过的css类名
errorElement：使用什么标签标记错误,默认是 label，可以改成 em。
wrapper：使用什么标签把上边的errorElement包起来
errorLabelContainer：把错误信息统一放在一个容器里面
errorContainer：显示或者隐藏验证信息，可以自动实现由错误信息出现时把容器属性变为显示，无错误时隐藏（一般同时使用和上面3个或上面3个同时使用）
1
2
3
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
showError：可以显示总共有多少个未通过验证的元素
errorPlacement：自定义错误信息放到哪里.默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
1
2
3
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

success：要验证的元素通过验证后的动作,如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

success: function(label) {
// set &nbsp; as text for IE
label.html("&nbsp;").addClass("checked");
//label.addClass("valid").text("Ok!")
}
//添加 "valid" 到验证元素，在 CSS 中定义的样式 <style>label.valid {}</style>。
success: "valid"

highlight：可以给未通过验证的元素加效果（主要针对表单元素）
unhighlight：去除未通过验证的元素的效果，一般和highlight同时使用

Validate()方法的选择器扩展

:blank 选择所有值为空的元素（如空格）
:filled 选择所有值不为空的元素
:unchecked 选择所有没有被选中的元素

自定义验证方法

jQuery.validator.addMethod(name,.method[,message])

可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。

name:添加的方法的名字。
method:function(value,element,params)方法逻辑,是一个函数，接收三个参数 (value,element,param) 。value 是元素的值，element 是元素本身，param 是参数。

message:提示消息

$.validator.addMethod("postcode", function(value, element, params){
            var postcode = /^[0-9]{6}$/;
            return this.optional(element) || (postcode.test(value));
        }, $.validator.format("请填写正确的{0}邮编！"));

additional-methods.js包含了很多扩展验证方法。

在写自定义方法时可以参考这个js库。

//Query Validate提供了中文信息提示内容
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});